@extends('home.parent')
@section('title','用户列表')
@section('head_js')
@endsection
@section('head_css')
<link rel="stylesheet" href="{{ asset('/css/dataTables.bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('/css/toggleButtonsMain.css') }}">
@endsection
@section('content')
  <div class="content-wrapper">
    <section class="content-header">
      <h1>
        用户列表
        <small></small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="{{URL('admin')}}"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li class="active">用户列表</li>
      </ol>
    </section>
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <div class="form-inline pull-right">
                <fieldset>
                  <div class="input-group input-group-sm">
                    <span class="input-group-addon"><strong>昵称</strong></span>
                    <input type="text" class="form-control" id="nickname">
                  </div>
                  <div class="input-group input-group-sm">
                    <div class="input-group-btn">
                      <button type="button"  class="btn btn-primary" onclick="searchData()"><i class="fa fa-search"></i></button>
                    </div>
                  </div>
                </fieldset>
              </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="data_list" class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>所属会员</th>
                    <th>编号</th>
                    <th>昵称</th>
                    <th>头像</th>
                    <th>国家</th>
                    <th>地区</th>
                    <th>性别</th>
                    <th>类型</th>
                    <th>来源</th>
                    <th>更新时间</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                  <tr>
                    <th>所属会员</th>
                    <th>编号</th>
                    <th>昵称</th>
                    <th>头像</th>
                    <th>国家</th>
                    <th>地区</th>
                    <th>性别</th>
                    <th>类型</th>
                    <th>来源</th>
                    <th>更新时间</th>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  <style>
    #tableComment table{
      border-collapse: collapse;
      color: #777;
      width:100%;
    }
    #tableComment table tr th,#tableComment table tr td{
      padding: 10px;
      border: 1px solid #f8f8f8;
      white-space: nowrap
    }
    #tableComment table tbody tr:hover{
      background:#f3f3f3;
    }
    #tableComment table thead tr{
      background: #f0f0f0;
    }
    #tableComment .more{
      text-align:center;
      padding:10px 0;
    }
    #tableComment .more span{
      cursor:pointer;
    }
  </style>
  <div id="tableComment" style="display:none;color:#777;padding:10px 20px 0 20px;">
    <table>
      <thead>
      <tr>
        <td>视频</td>
        <td>内容</td>
        <td>用户昵称</td>
        <td>账号(电话，微信)</td>
        <td>视频地址</td>
        <td>评论时间</td>
        <td>获取时间</td>
        <td>处理状态</td>

      </tr>
      </thead>
      <tbody></tbody>
    </table>
    <div class="more"></div>
    <input type="hidden" name="videoId">
    <input type="hidden" name="nextPage">
  </div>
@endsection
@section('foot_js')
<script src="{{ asset('/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('/js/dataTables.bootstrap.min.js') }}"></script>
<script src="{{ asset('/js/jquery.slimscroll.min.js') }}"></script>
<script src="{{ asset('/js/fastclick.js') }}"></script>
<script src="{{ asset('/js/tools.js') }}"></script>
<script>
var list_ajax;
$(function () {
  //提示信息
  var lang = puppet.langShow();
  //初始化表格
  list_ajax = $("#data_list").dataTable({
    language: lang, //提示信息
    autoWidth: false, //禁用自动调整列宽
    stripeClasses: ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
    processing: true, //隐藏加载提示,自行处理;
    serverSide: true, //启用服务器端分页
    searching: false, //禁用原生搜索
    //"sSearch": "搜索:",
    orderMulti: false, //启用多列排序
    order: [[0, 'desc']], //取消默认排序查询,否则复选框一列会出现小箭头
    renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui
    pagingType: "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
    aLengthMenu : [10, 20, 50, 100], //更改显示记录数选项
    iDisplayLength:10,
    columnDefs: [
      {
        "targets": [1,2,3,4,5,6,7,8,], //列的样式名
        "orderable": false    //包含上样式名‘nosort’的禁止排序
      },
    ],
    ajax: function (data, callback, settings) {
      //封装请求参数
      var param = {};
      param.limit = data.length; //页面显示记录条数，在页面显示每页显示多少项的时候
      param.start = data.start; //开始的记录序号
      param.page = (data.start / data.length) + 1; //当前页码
      param.order = data.order;
      param.nickname = $.trim($("#nickname").val());
      $.ajax({
        type: "POST",
        url: "{{ URL('admin/user/dataList') }}",
        cache: false, //禁用缓存
        data: param, //传入组装的参数
        dataType: "json",
        success: function (result) {
          var returnData = {};
          returnData.draw = data.draw; //这里直接自行返回了draw计数器,应该由后台返回
          returnData.recordsTotal = result.total; //返回数据全部记录
          returnData.recordsFiltered = result.total; //后台不实现过滤功能，每次查询均视作全部结果
          returnData.data = result.data; //返回的数据列表
          callback(returnData);
        }
      });
    },
    //列表表头字段
    columns: [
      {"data": "pid"},
      {"data": "kid"},
      {"data": "nickname"},
      {"data": "avatar"},
      {"data": "country"},
      {"data": "province"},
      {"data": "gender"},
      {"data": "e_account_role"},
      {"data": "source_type"},
      {"data": "update_time"}
    ],
  }).api();
});
function searchData(){
  $("#data_list").dataTable().fnDraw(false);
  layer.msg('操作成功',{icon:6});
}
//显示视频评论
function showshoucang(video_id,title){
  layer.closeAll();
  getVideoComment(video_id);
  $('#tableComment tbody').html("");
  $('#tableComment .more').html("");
  showlayerArea("tableComment",title,"80%","80%");
}
//拉取评论数据
function getVideoComment(video_id,page=1){
  $.ajax({
    type:'POST',
    url: "{{ URL('userinfo/get/comment') }}",
    data: {video_id:video_id,page:page},
    dataType:'json',
    success:function(r){
      if(r.code==1){
        layer.msg(r.msg,{icon: 5});
        return false;
      }
      if(page==1){
        if(r.html==''){
          $('#tableComment tbody').html("<tr><td colspan=\"10\" style=\"text-align:center;\">无数据</td></tr>");
        }else{
          $('#tableComment tbody').html(r.html);
        }
      }else if(page>1){
        $('#tableComment tbody').append(r.html);
      }
      if(r.nextPage==0){
        $('#tableComment .more').html("");
      }else{
        $('#tableComment .more').html("<span onclick=\"getMore()\">点击加载更多</span>");
      }
      $('#tableComment input[name="videoId"]').val(video_id);
      $('#tableComment input[name="nextPage"]').val(r.nextPage);
    },
    error:function(){
      $('#tableComment tbody').html("<tr><td colspan=\"10\" style=\"text-align:center;\">无数据</td></tr>");
      layer.msg("网络错误",{icon: 5});
    }
  });
}
//加载下一页评论数据
function getMore(){
  var nextPage=$('#tableComment input[name="nextPage"]').val();
  var video_id=$('#tableComment input[name="videoId"]').val();
  if( nextPage!=0 && nextPage!='' && nextPage!=undefined && !isNaN(nextPage) ){
    getVideoComment(video_id,nextPage);
  }
}
//关注用户
function following(follow){
  qrCode("showQrcode",follow,"扫码私聊");
}
//修改评论处理状态
function upStatus(kid,obj){
  var thisType=$(obj).attr("type");
  $.ajax({
    type:'POST',
    url: "{{ URL('userinfo/get/status') }}",
    data: {kid:kid},
    dataType:'json',
    success:function(r){
      if(r.code==0){
        if(thisType=='checkbox'){
          $(obj).prop('type','default');
          $(obj).prop('checked','');
        }else{
          $(obj).prop('type','checkbox');
          $(obj).prop('checked','checked');
        }
        layer.msg("操作成功",{icon: 6});
      }else{
        layer.msg("操作失败",{icon: 5});
        return false
      }
    },
    error:function(){
      layer.msg("网络错误",{icon: 5});
      return false;
    }
  });
}
</script>
@endsection